<template>
    <div class="blog_list">
        <!-- 卡片视图 -->
        <el-card shadow="never">
            <!-- 搜索 添加 -->
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-input placeholder="请输入内容" :disabled="searchVisible" v-model="queryInfo.query" size="small" clearable @clear="getblogList">
                        <el-button slot="append" :disabled="searchVisible" icon="el-icon-search" @click="searchBloginfo"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button size="small" @click="searchVisible = !searchVisible">
                        <i :class="searchVisible ? 'el-icon-arrow-up': 'el-icon-arrow-down'"></i>
                        高级搜索
                    </el-button>
                </el-col>
            </el-row>

            <!-- 高级搜索 -->
            <transition name="fade-transform" mode="out-in">
                <div class="search_NB" v-show="searchVisible">
                    <el-divider content-position="left">
                        <span>高级搜索区域</span>
                    </el-divider>
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <span>文章分类&nbsp;:&nbsp;</span>
                            <el-select v-model="value" size="small" placeholder="请选择文章分类">
                                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="10">
                            <span>时间范围&nbsp;:&nbsp;</span>
                            <!-- value-format="timestamp" 时间戳类型-->
                            <el-date-picker size="small" v-model="dateTime" type="daterange" align="right" value-format="timestamp" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
                        </el-col>
                    </el-row>
                </div>
            </transition>
        </el-card>

        <el-card shadow="never" class="example">
            <div class="el-table-tool d-flex j-sb a-center">
                <div class="left">
                    <el-button type="primary" size="small" @click="addDialogVisible()">
                        <i class="el-icon-plus"></i> 添加
                    </el-button>
                    <el-button type="danger" size="small">
                        <i class="el-icon-delete"></i> 删除
                    </el-button>
                    <el-button type="danger" size="small">
                        <i class="el-icon-delete-solid"></i> 回收站
                    </el-button>
                    <download-excel class="export-excel-wrapper" :data="excel.json_data" :name="excel.name" :fields="excel.json_fields" :type="excel.fileType">
                        <el-button type="success" size="small">
                            <i class="el-icon-download"></i>
                            导出EXCEL
                        </el-button>
                    </download-excel>
                </div>
                <div class="right d-flex j-sb">
                    <div class="ele-tool-item">
                        <el-tooltip class="item" effect="dark" content="刷新" placement="top">
                            <i class="el-icon-refresh-right" @click="refresh()"></i>
                        </el-tooltip>
                    </div>
                    <div class="ele-tool-item" @click="toggle">
                        <el-tooltip class="item" effect="dark" :content="!fullscreen ? '全屏' : '取消'" placement="top">
                            <i :class="
                                    !fullscreen
                                        ? 'iconfont icon-screen-full'
                                        : 'iconfont icon-screen-restore'
                                "></i>
                        </el-tooltip>
                    </div>
                </div>
            </div>
            <!-- 用户列表区域 -->
            <el-table :data="blogList" v-loading="loading" border stripe style="width: 100%">
                <!-- stripe: 斑马条纹
                border：边框-->
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column type="index" label="#" width="50" :index="tableIndex" fixed></el-table-column>
                <el-table-column prop="title" label="标题" width="600" show-overflow-tooltip></el-table-column>
                <el-table-column prop="add_time" sortable label="发布时间" width="180" align="center">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        {{ scope.row.add_time | dataFormat }}
                    </template>
                </el-table-column>
                <el-table-column prop="views" sortable label="浏览量" width="150" align="center">
                    <template slot-scope="scope">
                        <el-tag size="medium">{{ scope.row.views }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="cate_name" label="所属分类" width="150" align="center">
                    <template slot-scope="scope">
                        <el-tag size="medium">{{ scope.row.cate_name }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column align="center" width="200" prop="image" label="图片">
                    <template slot-scope="scope">
                        <el-popover placement="right" title trigger="hover">
                            <img :src="scope.row.image" style="height: 400px; width: 500px" />
                            <img slot="reference" :src="scope.row.image" :alt="scope.row.image" fit="cover" style="max-height: 50px; max-width: 130px" />
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column label="显示状态" width="100" align="center">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.state" :active-value="1" :inactive-value="0" active-color="#13ce66" inactive-color="#ff4949" @change="userStateChanged(scope.row)"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" align="center" label="操作" width="300">
                    <template slot-scope="scope">
                        <el-button type="success" plain icon="el-icon-search" size="mini" @click="selectBlogById(scope.row.id)">查看</el-button>
                        <el-button type="primary" plain icon="el-icon-edit-outline" size="mini" @click="editBlogById(scope.row.id)">编辑</el-button>
                        <el-button type="danger" plain icon="el-icon-delete" size="mini" @click="removeBlogById(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页区域 -->
            <el-pagination class="page" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum" :page-sizes="[10, 15]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
        </el-card>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                //高级搜索是否显示
                searchVisible: false,
                //EXCEL配置
                excel: {
                    json_data: [],
                    fileType: 'xls', //默认导出EXCEL格式xls,csv
                    name: '文章列表数据信息', //默认导出EXCEL文件名
                    //自定义导出的字段
                    json_fields: {
                        文章编号: 'id',
                        文章标题: 'title',
                        文章分类: 'cate_name',
                        文章关键词: 'Keywords',
                        文章描述: 'desc',
                        浏览量: 'views',
                        作者: 'author',
                        发布时间: 'add_time',
                    },
                },
                // 全屏状态
                fullscreen: false,
                loading: false,
                // 获取文章列表查询参数对象
                queryInfo: {
                    query: '',
                    // 当前页数
                    pagenum: 1,
                    // 每页显示多少数据
                    pagesize: 10,
                },
                // 评分颜色变化
                colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
                blogList: [],
                total: 0,
                //日期选择器
                pickerOptions: {
                    shortcuts: [
                        {
                            text: '24小时内',
                            onClick(picker) {
                                const end = new Date()
                                const start = new Date()
                                start.setTime(start.getTime() - 3600 * 1000 * 24)
                                picker.$emit('pick', [start, end])
                            },
                        },
                        {
                            text: '最近一周',
                            onClick(picker) {
                                const end = new Date()
                                const start = new Date()
                                start.setTime(
                                    start.getTime() - 3600 * 1000 * 24 * 7
                                )
                                picker.$emit('pick', [start, end])
                            },
                        },
                        {
                            text: '最近一个月',
                            onClick(picker) {
                                const end = new Date()
                                const start = new Date()
                                start.setTime(
                                    start.getTime() - 3600 * 1000 * 24 * 30
                                )
                                picker.$emit('pick', [start, end])
                            },
                        },
                        {
                            text: '最近三个月',
                            onClick(picker) {
                                const end = new Date()
                                const start = new Date()
                                start.setTime(
                                    start.getTime() - 3600 * 1000 * 24 * 90
                                )
                                picker.$emit('pick', [start, end])
                            },
                        },
                    ],
                },
                dateTime: '',
            }
        },
        created() {
            this.getblogList()
        },
        methods: {
            async getblogList() {
                this.loading = true
                const { data: res } = await this.$http.post(
                    '/article_page',
                    this.queryInfo
                )
                if (res.status !== 200) {
                    return this.$message.error(res.message)
                }
                this.loading = false
                console.log(res)
                this.blogList = res.results
                this.excel.json_data = res.allData
                console.log(this.excel.json_data)
                //分页处理
                this.total = res.total
                this.$message.success(res.message)
            },

            async searchBloginfo() {
                const { data: res } = await this.$http.post(
                    '/article_search',
                    this.queryInfo
                )
                if (res.status !== 200) {
                    return this.$message.error(res.message)
                }
                console.log(res)
                this.blogList = res.results
                this.$message.success(res.message)
            },

            // 删除单个文章事件
            async removeBlogById(id) {
                const confirmResult = await this.$confirm(
                    '此操作将永久删除该文章, 是否继续?',
                    '提示',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                    }
                ).catch(err => err)
                if (confirmResult !== 'confirm') {
                    return this.$message.info('已取消删除')
                }
                const { data: res } = await this.$http.delete('article/' + id)
                console.log(res)
                if (res.status !== 200) return this.$message.error(res.message)
                this.$message.success(res.message)
                this.getblogList()
            },

            //编辑单个文章事件
            editBlogById(id) {
                console.log(id)
                this.$router.push(`/blogEdit/${id}`)
            },
            selectBlogById(id) {
                this.$router.push(`/blogView/${id}`)
            },

            // 监听 pagesize改变的事件
            handleSizeChange(newSize) {
                // console.log(newSize)
                this.queryInfo.pagesize = newSize
                this.getblogList()
            },
            // 监听 页码值 改变事件
            handleCurrentChange(newSize) {
                // console.log(newSize)
                this.queryInfo.pagenum = newSize
                this.getblogList()
            },
            // 添加文章事件
            addDialogVisible() {
                this.$router.push('/blogAdd')
            },
            //分页累加问题解决
            tableIndex(index) {
                return (
                    (this.queryInfo.pagenum - 1) * this.queryInfo.pagesize +
                    index +
                    1
                )
            },
            //刷新
            refresh() {
                this.getblogList()
            },
            // 全屏功能
            toggle() {
                this.$fullscreen.toggle(this.$el.querySelector('.example'), {
                    wrap: false,
                    callback: this.fullscreenChange,
                })
            },
            fullscreenChange(fullscreen) {
                this.fullscreen = fullscreen
                this.screenfullActive = !this.screenfullActive
            },
            // fullscreen() {
            //     // if (!screenfull.isEnabled) {
            //     //     this.$notification.open({
            //     //         message: "温馨提示",
            //     //         description:
            //     //             "您的浏览器无法使用全屏功能，请更换谷歌浏览器或者请手动点击F11按钮全屏展示！",
            //     //         duration: 10,
            //     //         placement: "bottomLeft",
            //     //     });
            //     //     return false;
            //     // }
            //     // screenfull.toggle();
            //     // if (screenfull.isFullscreen) {
            //     //     this.screenfullBut = false;
            //     // } else {
            //     //     this.screenfullBut = true;
            //     // }
            //     // screenfull.toggle();
            //     this.screenfullActive = !this.screenfullActive;
            //     console.log(this.screenfullActive);
            // },
        },
    }
</script>

<style lang="scss">
    .blog_list {
        .search_NB {
            margin: 10px 0;
        }
        .export-excel-wrapper {
            display: inline-block;
            margin-left: 10px;
        }
    }
    .search_NB .el-col span {
        color: var(--color-text-secondary);
    }
</style>

